<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <title>Volcreate - 分类</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/mine.css">
</head>
<body>

<!--导航-->
<nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <!--tb : top and bottom-->
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Volcreate</h2>
            <!--icon的地址-->
            <!--https://semantic-ui.com/elements/icon.html#interfaces-->
            <a href="index.html" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="category.html" class="m-item item m-mobile-hide"><i class="idea icon"></i>博客筛选</a>
            <a href="blogs.html" class="m-item item m-mobile-hide"><i class="blogger icon"></i>博客</a>
            <a href="archive.html" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="more.html" class="m-item item m-mobile-hide"><i class="bars icon"></i>更多</a>
            <a href="about.html" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>

            <div class="right m-item item m-mobile-hide">
                <div class="ui inverted transparent m-padded-tb-small input icon">
                    <input type="text" placeholder="Search....">
                    <i class="search link icon"></i>
                </div>
            </div>

        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!--中间内容-->
<div class="m-container m-padded-tb-big ">
    <div class="ui container">
        <!------------------总表--------------------->
        <!--top bar-->
        <div class="ui vertical segment m-padded-tb-mini">

            <div class="ui top attached tabular menu">
                <a href="" onclick="clear1(this)" class="m-items item" th:classappend="${activeTopId} == 1 ? 'active'"
                   data-tab="1">类型</a>
                <a href="" onclick="clear2(this)" class="m-items item" th:classappend="${activeTopId} == 2 ? 'active'"
                   data-tab="2">标签</a>
                <div class="ui vertical right aligned item">
                </div>
            </div>

            <div id="tab1" class="ui attached tab active segment" data-tab="1">
                <!--类型-->
                <div class="ui labeled button" th:each="type : ${types.list}">
                    <a onclick="typepost(this)" th:attr="data-typeid=${type.id}" class="ui basic button"
                       th:text="${type.name}">Linux</a>
                    <div class="ui basic left pointing label " th:text="${type.blogSize}">1,048</div>
                </div>
            </div>

            <div id="tab2" class="ui attached tab  segment" data-tab="2">
                <!--标签-->
                <a onclick="tagpost(this)" th:attr="data-tagid=${tag.id}" th:each="tag : ${tags.list}"
                   class="basic ui left pointing label m-margin-tb-tiny large">
                    <span th:text="${tag.name}">linux</span>
                    <div class="detail" th:text="${tag.blogSize}">23</div>
                </a>
            </div>

        </div>


        <input type="hidden" name="typeId" value="-1">
        <input type="hidden" name="tagId" value="-1">

        <!------------------详细信息--------------------->
        <!--通过ajax异步返回内容，分类和标签返回的内容是不同的-->
        <div id="blog-container" class="ui top attached segment m-padded-tb">
            <div th:fragment="blogList">
                <!--a blog-->
                <div class="ui padded segment m-padded-tb m-mobile-lr-narrow" th:each="blog : ${page.list}">
                    <div class="ui middle aligned mobile reversed stackable grid">
                        <!--content-->
                        <div class="thirteen wide column">
                            <!--content-->
                            <div class="content">
                                <!--title-->
                                <h3 class="ui header"><a href="#" class="m-black" target="_blank"
                                                         th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">title</a>
                                </h3>

                                <!--description-->
                                <div class="description"><p class="m-text" th:text="${blog.description}">text</p></div>
                            </div>

                            <!--bottom info-->
                            <div class="ui middle aligned stackable two row grid">
                                <!--博客-->
                                <div class="row m-padded-top-large">
                                    <!--info-->
                                    <div class="left aligned eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <!--personality-->
                                            <div class="item">
                                                <!--portraits-->
                                                <img src="https://picsum.photos/id/237/100/100" alt=""
                                                     class="ui avatar image" th:href="@{/blog/{id}(id=${blog.id})}">
                                                <!--name-->
                                                <div class="content"><a href="#" class="header"
                                                                        th:text="${blog.user.nickname}">zxc</a></div>
                                            </div>
                                            <!--calendar-->
                                            <div class="item"><i class="calendar icon"></i><span
                                                    th:text="|  ${#dates.format(blog.gmtModified,'yyyy-MM-dd')}|">2020-8-17更新时间</span>
                                            </div>
                                            <!--times-->
                                            <div class="item"><i class="eye icon"></i><span th:text="|  ${blog.views}|">1234浏览次数</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!--to learn more-->
                                    <div class="right aligned five wide column">
                                        <a href="#" onclick="typepost(this)" th:attr="data-typeid=${blog.type.id}"
                                           class="ui brown label m-padded-tiny m-text-thin"
                                           th:text="${blog.type.name}">类别</a>
                                    </div>
                                </div>
                                <!--标签-->
                                <div class="row m-padded-top-mini">
                                    <div th:each="tag : ${blog.tags}">
                                        <a href="#" onclick="tagpost(this)" th:attr="data-tagid=${tag.id}"
                                           class="ui black basic left pointing label mini m-padded-tb-mini"
                                           th:text="${tag.name}">linux</a>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <!--linked image-->
                        <div class="three wide column">
                            <a href="blog.html" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank"
                               class="center aligned images">
                                <img src="../static/images/c1.jpeg" th:src="@{${blog.firstPicture}}"
                                     class="ui rounded medium image" alt="" style="height: 8em;width: auto;"/>
                            </a>
                        </div>

                    </div>
                </div>
                <!--footer page-control-->
                <div class="ui bottom attached segment" th:if="${page.pages}>1">
                    <div class="ui middle aligned two column grid">
                        <div class="left aligned column">
                            <a onclick="page(this)" th:attr="data-page=${page.pageNum}-1" th:unless="${page.isFirstPage}"
                               class="ui basic teal button"><i class="left chevron icon"></i>previous</a>
                        </div>
                        <div class="right aligned column">
                            <a onclick="page(this)" th:attr="data-page=${page.pageNum}+1" th:unless="${page.isLastPage}"
                               class="ui basic teal button">next<i class="right chevron icon"></i></a>
                        </div>
                    </div>
                </div>
            </div>

        </div>





    </div>
</div>


<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted m-footer vertical segment m-padded-tb-big">
    <div class="ui center aligned container">
        <p class="m-opacity-mini">Version 0.0.1</p>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-opacity-tiny"> Copyright © 2020 - 2021 Volcreate Designed
            by zxc </p>
    </div>
</footer>


<!--注意，顺序不能反,否则一些js无法实现-->
<!----------------JS---------------->
<!--/*/<th:block th:replace="_fragments :: script" >/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../static/js/mine.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $(".tabular.menu .m-items").tab();
    $(".pagination")


    function clear1(obj) {
        $('#tab2 a').addClass("basic");// 全部变亮
    }

    function clear2(obj) {
        $('#tab1 div a').addClass("basic");// 全部变亮
    }

    function typepost(obj) {
        var typeId = $(obj).data('typeid');
        $('#tab1 div a').addClass("basic");// 全部变亮
        $('#tab2 a').addClass("basic");// 全部变亮
        $(obj).removeClass("basic");// 自己变暗
        $("[name='typeId']").val(typeId);
        $("[name='tagId']").val(-1);
        postType(typeId);
    }

    function tagpost(obj) {
        var tagId = $(obj).data('tagid');
        $('#tab1 div a').addClass("basic");// 全部变亮
        $('#tab2 a').addClass("basic");// 全部变亮
        $(obj).removeClass("basic");// 自己变暗
        $("[name='typeId']").val(-1);
        $("[name='tagId']").val(tagId);
        postTag(tagId);
    }

    function postType(typeId) {
        $('#blog-container').load("/fast/type/" + typeId, {});
    }

    function postTag(tagId) {
        $('#blog-container').load("/fast/tag/" + tagId, {});
    }

    function page(obj) {
        var typeId = $("[name='typeId']").val();
        var tagId = $("[name='tagId']").val();
        var k = $(obj).data("page");
        if (typeId != -1) {
            $("#blog-container").load("/fast/type/" + typeId, {
                page: k
            });
        } else if (tagId != -1) {
            $("#blog-container").load("/fast/tag/" + tagId, {
                page: k
            });
        } else {
            $("#blog-container").load("/fast", {
                page: k
            });
        }
    }

</script>
<!----------------JS---------------->
</body>
</html>